<!DOCTYPE html>
<html>

<head>
    <title>
        编码转换、HTML转义、Unicode、时间戳
    </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="加密,加密方式,md5,sha" name="keywords" />
    <meta content="加密方式" name="description" />
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.16.0/axios.min.js"></script>
    <style type="text/css" scoped>
        body,
        html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-size: 62.5%;
            box-sizing: border-box;
            overflow: hidden;
            font-weight: 400 !important;
            background: whitesmoke;
			overflow: auto;
        }

        input {
            /* width:8rem ! important; */
            height: 3rem;
            margin-top: 1rem;
            text-align: center;
        }

        .wayInfo {
            border-bottom: 2px solid aqua;
            display: flex;
            justify-content: flex-start;
            padding: 0;
            margin: 2rem 0 ;
            width: 100%;
            padding: 0 2rem 0 2rem;
            height: 4rem;
            box-sizing: border-box;

        }

        .wayInfo p {
            /*  margin-left: 2rem;
            margin-right: 2rem;
            margin: 1rem 0 0 0; */
            position: relative;
            flex: 1;
            overflow: auto;
            /* border-color:blue blue white lightcyan; */
            /*  width: 10rem; */
            /* box-sizing: border-box; */
            height: 3rem;
            line-height: 3rem;
            text-align: center;
            color: lightskyblue;
            z-index: 22;
            box-sizing: border-box;
        }

        .wayInfo p:hover {
            color: mediumblue !important;
            /* border-bottom: none; */
        }

        .checkColor {
            border-top: 3px solid blue;
            color: mediumblue !important;
            border-bottom: 5px solid whitesmoke;
            border-left: 2px solid aqua;
            border-right: 2px solid aqua;
        }

        textarea {
            margin-left: 2rem;
            width: 45%;
            height: 15rem;
            box-sizing: border-box;
        }

        .buttonWay {
            display: flex;
            justify-content: flex-end;
            margin-right: 2rem;

        }

        #buttonWay p {
            width: 8rem;
            height: 3rem;
            text-align: center;
            line-height: 3rem;
            margin-right: 1rem;
            box-sizing: border-box;
            border: 1px solid blue;
            background: aqua;
            border-radius: 5px;

        }

        .buttonWay p:hover {
            background: thistle !important;
        }

        #buttonWay>checkClass {
            background: blanchedalmond !important;
            color: white !important;
        }

        .showMessage {
            overflow: auto;
            width: 100%;
           /* height: 60%; */
        }

        .unixShow div {
            /* margin:0 5rem 0 5rem; */
            display: flex;
            justify-content: center;
            margin-right: 2rem;

        }

        .unixShow div:nth-child(0) {
            border-bottom: 1px solid blue;
        }

        .unixShow div p {
            margin-left: 0.5rem;
            box-sizing: border-box;
            /* height: 2rem; */
            /* width: 4rem; */
            padding: 0.4rem;
            border: 1px solid black;
            text-align: center;
            /* line-height: 2rem; */
            border-radius: 5px;

        }

        .unixShow .textStyle {
            font-size: 1.6rem;
            font-weight: bold;
            box-sizing: border-box;
            /* height: 4rem; */
            /* width: 10rem; */
            padding: 0.4rem;
            line-height: 2rem;

        }

        .unixShow div p:hover {
            background: bisque;
            font-weight: 400;
        }

        .unixShowDetail {
            border-bottom: 1px solid blue;
            /* 	padding-bottom:1.5rem;
				margin-left:2rem;
				margin-bottom:1.5rem; */
        }

        .unixShowDetail,
        .unixChange,
        .chinaChange,
        .lastdetailInfo {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            border-bottom: 1px solid blue;
            margin-left: 2rem;
            padding-bottom: 1rem;
        }

        .titeInfo:hover,
        .titeInfo2:hover {
            background: none !important;
            font-weight: 400;
        }

        .titeInfo .titeInfoUnix {
            width: 20rem;
            height: 4rem;
            margin: 0;
            border: none;
            line-height: 4rem !important;
        }

        .titeInfo,
        .titeInfo2 {
            /* width: 20rem !important;
            height: 4rem !important;
            margin: 0 !important; */
            border: none !important;
            line-height: 2.5rem;
        }

        .titeInfo2 {
            /* width:4rem!important; */

        }

        select {
            margin-top: 2rem;
            height: 2rem;
        }

        span {
            text-align: center;
            line-height: 2rem;
            box-sizing: border-box;
            height: 2rem;
            margin-top: 2rem;
            display: inline-block;
        }

        .unixChange,
        .chinaChange {
            margin-bottom: 1rem;
        }

        .chinaChange {
            /* width:3rem; */
        }

        .cryptType {
            display: flex;
            justify-content: flex-start;
            margin-left: 2rem;
        }

        .cryptType p {
            width: 4rem;
            height: 2rem;
            border-radius: 5px;
            background: thistle;
            text-align: center;
            line-height: 2rem;
            margin-right: 2rem;
            color: whitesmoke;

        }

        .cryptType p:hover {
            background: rebeccapurple;
            animation: animation3 3s 3;

        }

        .hashChoose {
            background: none !important;
        }

        .hashChoose:hover {
            background: none !important;
        }

        #buttonWay clearColor {
            background: none !important;
        }

        a {
            text-decoration: none;
            display: inline-block;
            margin: 1rem 1rem 0 1rem;
            border: 1px solid blue;
            width: 6rem;
            height: 3rem;
            box-sizing: border-box;
            line-height: 3rem;
            text-align: center;
            border-radius: 5px;
            background: cornsilk;
        }

        a:link {
            color: black;
        }

        a:visited {
            color: brown;
        }

        a:hover {
            color: red;
        }

        a:active {
            color: red;
        }

        .lastdetailInfo {

            text-align: center;
            line-height: 2.5rem;
        }

        .lastdetailInfo p {
            /* margin-left:1rem; */

        }

        .lastdetailInfo input {
            width: 3rem !important;
            /* margin-right:1rem; */
        }

        .checkbutton {
            /* width:10rem !important; */
            box-sizing: border-box;
            font-size: 1rem;
            font-weight: 800;
            margin-right: 1rem;
            /* height:5rem; */
            text-align: center;
        }

        .checkbutton, .changeButton {
            line-height: 2.5rem !important;
            /* line-height: 1.6rem;
            height: 3rem !important;
            width: 6rem !important; */
        }

        #diff {
            width: 8rem !important;
        }

        @keyframes animation3 {
            30% {

                border: 0.1rem solid rgb(138, 118, 199);
            }

            30% {
                font-weight: 800 !important;
            }

            40% {
                transform: scale(1.5)
            }

        }
    </style>
    <script type="text/javascript">
        // let host = 'http://localhost:8000'
        let host = 'https://www.niraya.top'
        window.onload = function () {
            let globalbool = true;
            let totalData = new Vue({
                el: '#totalData',
                data: {
                    detailWay: 'Unicode编码转换',
                    outText: '',
                    inputText: '',
                    Unicodetype: ["Unicode转中文", "中文转Unicode"],
                    UTF8type: ["编码", "解码"],
                    Unix: [],
                    hashType: ["加密", "解密"],
                    wayMethods: ["Unicode编码转换", "HTML转义", "URL转义", "Unix时间戳", "Hash加密"],
                    nowTimeunix: '',
                    inputTimeunix: '',
                    wayChoose: [
                        { value: "秒", choose: "秒" },
                        { value: "毫秒", choose: "毫秒" }
                    ],
                    outputTimeunix: "",
                    cryptType: 'MD5',
                    type: "encryptedText",
                    cryptTypes: ["MD5", "SHA1", "SHA256"],
                    unixType: '',
                    htmlType: '',
                    HashType: '',
                    clearDatas: '',
                    selected: '秒',
                    selected2: '秒',
                    selected3: '秒',
                    beijinTime: '',
                    unixTime: '',
                    year: "",
                    month: '',
                    day: '',
                    hour: '',
                    min: '',
                    sec: '',
                    diffTime: '',
                    mylet: setInterval(this.fn, 1000),
                },
                mounted() {
                    this.getTimeunix()
                    let timestamp;
                    if (this.selected == '秒') {
                        timestamp = Math.round(new Date().getTime() / 1000)

                    } else {
                        timestamp = new Date().getTime();
                    }

                    this.inputTimeunix = timestamp;


                },
                watch: {
                    selected(value) {
                        this.chooseSecond(value, this.inputTimeunix);
                        this.inputTimeunix = timestamp;
                    },
                    selected2(value) {
                        this.chooseSecond(value, this.unixTime);
                        this.unixTime = timestamp;
                    },
                    selected3(value) {
                        this.chooseSecond(value, this.diffTime);
                        this.diffTime = timestamp;
                    },


                },
                methods: {
                    //格式化日期代码
                    dataFormat(date, fmt = 'YYYY-MM-DD HH:mm:ss') {
                        var o = {
                            'M+': date.getMonth() + 1,
                            'D+': date.getDate(),
                            'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12,
                            'H+': date.getHours(),
                            'm+': date.getMinutes(),
                            's+': date.getSeconds(),
                            'q+': Math.floor((date.getMonth() + 3) / 3),
                            'S': date.getMilliseconds()
                        }
                        var week = {
                            '0': '\u65e5',
                            '1': '\u4e00',
                            '2': '\u4e8c',
                            '3': '\u4e09',
                            '4': '\u56db',
                            '5': '\u4e94',
                            '6': '\u516d'
                        }
                        if (/(Y+)/.test(fmt)) {
                            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
                        }
                        if (/(E+)/.test(fmt)) {
                            fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '\u661f\u671f' : '\u5468') : '') + week[date.getDay() + ''])
                        }
                        for (var k in o) {
                            if (new RegExp('(' + k + ')').test(fmt)) {
                                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
                            }
                        }
                        return fmt
                    },

                    changeWay(value) {
                        this.detailWay = value;
                        this.inputText = '';
                        this.outText = '';
                    },
                    unixToTime(value, item) {
						let unixTimestamp;
						let num = parseInt(item)
                        if (value == "秒") {
                            unixTimestamp = new Date(num * 1000)
                        } else {
                            unixTimestamp = new Date(num)
                        }
                        timestamp = this.dataFormat(unixTimestamp, 'YYYY/MM/DD HH:mm:ss');
                        return timestamp;
                    },
                    chooseSecond(value, item) {
                        if (value == '秒') {


                            timestamp = parseInt(item / 1000);
                            return timestamp;
                        } else {
                            timestamp = item * 1000;
                            return timestamp
                        }
                    },
                    clearData() {
                        this.clearDatas = 1;
                        this.inputText = '';
                        this.outText = '';
                    },
                    submit(address, body, func) {
                        let that = this;
                        // axios.defaults.headers.post['Content-Type'] = 'application/json'
                        axios.post(address, JSON.stringify(body))
                            .then(func)
                            .catch(function (error) {
                                console.log(error);
                            });

                    },
                    getTimeunix() {
                        let that = this;
                        let fn = this.fn;
                        //  let mylet
                        clearInterval(this.mylet);
                        this.mylet = setInterval(fn, 1000);
                        // mylet = setInterval(fn, 1000);

                    },
                    fn() {
                        let that = this;
                        //毫秒
                        // let timestamp = new Date().getTime();

                        //秒
                        let timestamp = Math.round(new Date().getTime() / 1000)
                        that.nowTimeunix = timestamp;
                    },
                    myStopFunction() {
                        let that = this;
                        clearInterval(this.mylet);
                    },
                    reload() {
                        location.reload();
                    },
                    changeType(value) {
                        this.cryptType = value;

                    },
                    //unicom
                    changeDetailunix(value) {
                        this.unixType = value;

                        let type;
                        if (value == "Unicode转中文") {
                            type = "UtoCN"
                        } else {
                            type = "CNtoU"
                        }
                        let body = {
                            "type": type,
                            "inputStr": this.inputText
                        }
                        let address = host + "/api/unicode"
                        this.submit(address, body, (response) => {
                            this.outText = response.data.outputStr
                        })

                    },
                    //html url
                    changeDetailhtml(value) {
                        this.htmlType = value;

                        let type;
                        let body;
                        if (value == "编码") {
                            type = this.detailWay != 'URL转义' ? "toNCR" : 'encode'
                        } else {
                            type = this.detailWay != 'URL转义' ? "toCN" : 'decode'
                        }
                        body = {
                            "type": type,
                            "inputStr": this.inputText,
                        }
                        let way = this.detailWay === 'URL转义' ? 'urlcode' : 'ncr'
                        let address = host + "/api/" + way
                        this.submit(address, body, (response) => {
                            this.outText = response.data.outputStr
                        })

                    },
                    changeDetailhash(value) {
                        let that = this;
                        this.HashType = value;
                        let crypt;
                        if (value == '加密') {
                            crypt = "encrypt"
                        } else {
                            alert("解密无法选")
                            return
                        }
                        let body = {
                            "crypt": crypt,
                            "cryptType": this.cryptType,
                            "originText": this.inputText
                        }
                        let address = "https://www.niraya.top/api/hash"
                        this.submit(address, body, (response) => {
                            that.outText = response.data.encryptedText
                        })
                    },
                    //切换成北京时间
                    changeIntoB() {

                        let time = this.inputTimeunix;
						
                        this.unixToTime(this.selected, this.inputTimeunix)
                        //                         if(this.selected=="秒"){
                        //                             unixTimestamp = new Date(time * 1000) 
                        //                         }else if(this.selected=="毫秒"){
                        //                             unixTimestamp = new Date(time) 
                        //                         }

                        // unixTimestamp.toLocaleString()
                        // commonTime = this.dataFormat(unixTimestamp, 'YYYY/MM/DD HH:mm:ss');
                        this.beijinTime = timestamp
                        console.log(this.beijinTime)
                    },
                    changeUnix() {
                        let timestamp;
                        let that = this;
                        if (that.outputTimeunix.indexOf('/') == -1) {
                            alert("时间格式不正确");
                            return

                        }

                        if (this.selected2 == '秒') {
                            timestamp = Math.round(new Date(that.outputTimeunix).getTime() / 1000)
                            console.log(timestamp);
                        } else {
                            timestamp = new Date(that.outputTimeunix).getTime();
                            if (timestamp == 'NaN') {
                                alert("请输入正确的时间");
                                return;
                            }
                        }
                        // this.chooseSecond(value)
                        this.unixTime = timestamp;

                    },
                    diffchange() {
                        let timestamp;
                        let that = this;
                        let commonTime = new Date(Date.UTC(this.year, this.month - 1, this.day, this.hour, this.min, this.sec))

                        if (!this.year && !this.month & !this.day & !this.hour & !this.min & !this.sec) {
                            alert("请输入时间")
                            return
                        }
                        if (this.selected3 == '秒') {
                            timestamp = Math.round(commonTime.getTime() / 1000)
                        } else {
                            timestamp = commonTime.getTime();
                        }
                        // this.chooseSecond(value)
                        this.diffTime = timestamp;
                        // console.log(this.diffTime)

                    }
                },
            })

        }
    </script>
</head>

<body>
    <div id='totalData' style="width:100%;height:100%;background-size:100%;">
        <a href="https://www.niraya.top/page/webColor">web安全色</a>
        <a href="https://www.niraya.top/page/filter">filter工具</a>
        <a href="https://www.niraya.top/page/download">下载中转</a>
        <div class="wayInfo">
            <p v-for="(value,index) in wayMethods" :class='{"checkColor":detailWay==value}' @click="changeWay(value)">
                {{value}}</p>

        </div>

        <div class="showMessage">
            <div v-if="detailWay==='Unix时间戳'" class="unixShow">
                <div class="unixShowDetail">
                    <p class="titeInfo titeInfoUnix">现在的Unix时间戳(Unix timestamp)是</p>
                    <input type="text" v-model="nowTimeunix" style="color:red" readonly>
                    <p @click="getTimeunix" class="textStyle">开始</p>
                    <p @click="myStopFunction" class="textStyle">停止</p>
                    <p @click="getTimeunix" class="textStyle">刷新</p>
                </div>
                <div class="unixChange">
                    <p class="titeInfo">Unix时间戳（Unix timestamp）</p>
                    <input type="text" v-model="inputTimeunix">

                    <select name="wayChoose" id="Way" class="mySelect" v-model="selected">
                        <option v-for="val in wayChoose" v-bind:value="val.value">{{val.choose}}</option>
                    </select>

                    <P class="checkbutton" @click="changeIntoB">换成北京时间</P>
                    <input type="text" v-model="beijinTime" ref='timeBeiJ' readonly>
                </div>
                <div class="chinaChange">
                    <p class="titeInfo"> 北京时间（年/月/日 时:分:秒）</p>
                    <input type="text" v-model="outputTimeunix">
                    <P class="checkbutton" @click="changeUnix">换成Unix时间戳</P>
                    <input type="text" v-model="unixTime">
                    <select name="wayChoose" id="Ways" class="mySelect" v-model="selected2">
                        <option v-for="val in wayChoose" v-bind:value="val.value">{{val.choose}}</option>
                    </select>
                </div>
                <div class="lastdetailInfo">
                    <p class="titeInfo2"> 北京时间</p>
                    <input type="text" v-model="year"><span>年</span>
                    <input type="text" v-model="month"><span>月</span>
                    <input type="text" v-model="day"><span>日</span>
                    <input type="text" v-model="hour"><span>时</span>
                    <input type="text" v-model="min"><span>分</span>
                    <input type="text" v-model="sec"><span>秒</span>
                    <P class="checkbutton changeButton" @click="diffchange">换成Unix时间戳</P>
                    <input type="text" v-model="diffTime" id="diff">
                    <select name="wayChoose" id="Ways2" class="mySelect" v-model="selected3">
                        <option v-for="val in wayChoose" v-bind:value="val.value">{{val.choose}}</option>
                    </select>
                </div>
            </div>
            <div v-if="detailWay==='Hash加密'" class="cryptType">
                <!-- <div class="cryptType"> -->
                <p v-for="(value,index) in cryptTypes" :class='{"checkColor":cryptType==value}'
                    @click="changeType(value)">{{value}}</p>
                <!-- <p :class='{"checkColor":cryptType=="MD5"}'>
                                <input type="radio" name="check" checked v-model="cryptType" value="MD5">MD5
                            </p>
                            <p :class='{"checkColor":cryptType=="SHA1"}'>
                                <input type="radio" name="check" v-model="cryptType" value="SHA1">SHA1
                            </p>
                            <p :class='{"checkColor":cryptType=="SHA256"}'>
                                <input type="radio" name="check" v-model="cryptType" value="SHA256">SHA256
                            </p> -->
                <!-- </div> -->

                <!-- <div class="button">
                            <p @click="submit">确定</p>
                        </div> -->
            </div>
            <div v-if="detailWay!='Unix时间戳'">
                <textarea rows="10" cols="30" v-model="inputText" placeholder="请输入内容"></textarea>
                <textarea rows="10" cols="30" v-model="outText" placeholder="输出内容"></textarea>
            </div>

        </div>
        <div class="buttonWay" id="buttonWay">
            <p v-if="detailWay=='Unicode编码转换'" v-for="(value,index) in Unicodetype" @click="changeDetailunix(value)"
                :class='{"checkClass":cryptType==value}'>{{value}}</p>
            <p v-if="detailWay=='HTML转义'||detailWay=='URL转义'" v-for="(value,index) in UTF8type"
                @click="changeDetailhtml(value)" :class='{"checkClass":unixType==value}'>{{value}}</p>
            <p v-if="detailWay=='Unicode编码转换'||detailWay=='HTML转义'||detailWay=='URL转义'" @click="clearData(1)"
                class="{'clearColor':clearDatas==1}">清空结果</p>
            <p v-if="detailWay=='Hash加密'" v-for="(value,index) in hashType" @click="changeDetailhash(value)"
                :class="{'hashChoose':index==1}">{{value}}</p>
        </div>
    </div>


</body>

</html>